<template>
  <!-- 格位详细信息 -->
  <el-dialog
    title="格位详情"
    width="70%"
    :visible.sync="visible"
    center
    @close="$emit('update:show', false)">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>格位信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody v-if="cellForm != null">
              <tr>
                <td>
                  <div class="cell"><b>名称</b></div>
                </td>
                <td>
                  <div class="cell">{{ cellForm.name }}</div>
                </td>
                <td>
                  <div class="cell"><b>位置</b></div>
                </td>
                <td>
                  <div class="cell">{{ cellForm.location }}</div>
                </td>
                <td>
                  <div class="cell"><b>价格</b></div>
                </td>
                <td>
                  <div class="cell">{{ cellForm.price + ' (元)' }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell"><b>编号</b></div>
                </td>
                <td>
                  <div class="cell">{{ cellForm.id }}</div>
                </td>
                <td>
                  <div class="cell"><b>状态</b></div>
                </td>
                <td>
                  <template slot-scope="scope">
                    <dict-tag :options="statusOptions" :value="cellForm.status"/>
                  </template>
                </td>
                <td>
                  <div class="cell"><b></b></div>
                </td>
                <td>
                  <div class="cell"></div>
                </td>

              </tr>
              <tr>
                <td>
                  <div class="cell"><b>销售人</b></div>
                </td>
                <td>
                  <div class="cell">{{ orderForm.salemanName }}</div>
                </td>
                <td>
                  <div class="cell"><b>销售时间</b></div>
                </td>
                <td>
                  <div class="cell">{{ orderForm.createTime }}</div>
                </td>

                <td>
                  <div class="cell"><b></b></div>
                </td>
                <td>
                  <div class="cell"></div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>客户信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody v-if="custForm != null">
              <tr>
                <td>
                  <div class="cell"><b>姓名</b></div>
                </td>
                <td>
                  <div class="cell">{{ custForm.custName }}</div>
                </td>
                <td>
                  <div class="cell"><b>身份证</b></div>
                </td>
                <td>
                  <div class="cell">{{ custForm.number }}</div>
                </td>
                <td>
                  <div class="cell"><b>手机号</b></div>
                </td>
                <td>
                  <div class="cell">{{ custForm.phone }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell"><b>编号</b></div>
                </td>
                <td>
                  <div class="cell">{{ custForm.id }}</div>
                </td>
                <td>
                  <div class="cell"><b>性别</b></div>
                </td>
                <td>
                  <template slot-scope="scope">
                    <dict-tag :options="statusOptions" :value="custForm.status"/>
                  </template>
                </td>
                <td>
                  <div class="cell"><b>地址</b></div>
                </td>
                <td>
                  <div class="cell">{{ custForm.addr }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>逝者信息</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody v-if="fmDead != null">
              <tr>
                <td>
                  <div class="cell"><b>姓名</b></div>
                </td>
                <td>
                  <div class="cell">{{ fmDead.deceased }}</div>
                </td>
                <td>
                  <div class="cell"><b>身份证</b></div>
                </td>
                <td>
                  <div class="cell">{{ fmDead.number }}</div>
                </td>
                <td>
                  <div class="cell"><b>性别</b></div>
                </td>
                <td>
                  <div class="cell">{{ fmDead.sex }}</div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="cell"><b>编号</b></div>
                </td>
                <td>
                  <div class="cell">{{ fmDead.id }}</div>
                </td>
                <td>
                  <div class="cell"><b>逝世日期</b></div>
                </td>
                <td>
                  <div class="cell">{{ fmDead.deceasedDate }}</div>

                </td>
                <td>
                  <div class="cell"><b>备注</b></div>
                </td>
                <td>
                  <div class="cell">{{ fmDead.memo }}</div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>


      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>出入土记录</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead v-if="putForm != null">
              <tr>
                <th class="is-leaf">
                  <div class="cell">办理时间</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">逝者姓名</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">办理人姓名</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">办理人身份证</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">办理人手机号</div>
                </th>
                <th class="is-leaf">
                  <div class="cell">状态</div>
                </th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="putRecord in putForm">
                <td>
                  <div class="cell">{{ parseTime(putRecord.time, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
                </td>
                <td>
                  <div class="cell">{{ putRecord.deathName }}</div>
                </td>
                <td>
                  <div class="cell">{{ putRecord.operatorName }}</div>
                </td>
                <td>
                  <div class="cell">{{ putRecord.operatorIdentification }}</div>
                </td>
                <td>
                  <div class="cell">{{ putRecord.operatorPhone }}</div>
                </td>
                <td>
                  <div class="cell">{{ putRecord.status }}</div>
                </td>

              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <!--
  <span slot="footer" class="dialog-footer">
    <el-button @click="visible=false">取 消</el-button>
    <el-button type="primary" @click="visible = false">确 定</el-button>
  </span>
  -->
  </el-dialog>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {getCellDetail} from "@/api/fm/cellOrder"

export default {
//import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
//这里存放数据
    return {
      visible: false,
      formData: {
        id: null,
        cellId: null
      },
      cellForm: null,
      custForm: null,
      orderForm: null,
      putForm: null,
      fmDead: null
    };
  },
//监听属性 类似于data概念
  computed: {},
  props: {show: {type: Boolean, default: false}, cellId: {type: Number}, id: {type: Number}},
//监控data中的数据变化
  watch: {
    show() {
      this.visible = this.show;
    },
    cellId() {
      this.queryData()
    },
    id() {
      this.queryData();
    },
  },
//方法集合
  methods: {
    submitForm() {
    },
    resetForms() {
      this.cellForm = null;
      this.custForm = null;
      this.putForm = null;
      this.orderForm = null;
      this.formData = {id: null, cellId: null};
      this.fmDead = null;
    },
    queryData() {
      this.resetForms();
      this.formData.cellId = this.cellId
      this.formData.id = this.id
      getCellDetail(this.formData).then((response) => {
        if (response.fmCell != null) {
          this.cellForm = response.fmCell;
        }
        if (response.fmCustinfo != null) {
          this.custForm = response.fmCustinfo;
        }
        if (response.fmCellSellOrderDetail != null) {
          this.orderForm = response.fmCellSellOrderDetail;
        }
        if (response.fmPutInCellList != null) {
          this.putForm = response.fmPutInCellList;
        }

        if (response.fmDead != null) {
          this.fmDead = response.fmDead;
        }
      }).catch((err) => {
        alert(err);
      });
    }
  },
//生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
//生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>
